<template>
  <div class="recommend">
    <h3>商品推荐</h3>
    <div>
      <ul class="reContent">
        <li v-for="item in recommend" :key="item.goodsId" class="reGood" >
          <router-link :to="{name:'goodsDetail',params:{id:item.goodsId}}">
            <img  v-lazy="item.image" />
          </router-link>
          <p>{{item.goodsName}}</p>
          <div>
            <span class="prePrice">{{item.mallPrice | rmb}}</span>
            <span class="orgPrice">({{item.price | rmb}})</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["recommend"],
  data() {
    return {};
  }
};
</script>
<style scoped>
.recommend {
  background-color: #fff;
  overflow: hidden;
}
.recommend h3 {
  color: pink;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}
.recommend > div {
  overflow-y: scroll;
  height: 174px;
  width: 100%;
}
.recommend ul {
  width: 534%;
  height: 174px;
  animation: mymove 30s linear infinite
}

@keyframes mymove{
  from{
    transform: translateX(0)
  }
  to{
transform: translateX(-1625px)
  }
}
.recommend li {
  float: left;
  width: 125px;
  border-right: 1px solid #ccc;
  text-align: center;
  font-weight: 600;
  box-sizing: border-box;
}
.recommend li img {
  width: 100%;
}
</style>